<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year">
              <a-input v-model="model.year" placeholder="请输入年份"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" placeholder="请输入单据编号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="液洗" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isLiquidWashing">
              <a-checkbox v-model="isChecked" @change="onCheckboxChange"></a-checkbox>
<!--              <a-input v-model="model.isLiquidWashing" type="checkbox"  ></a-input>-->
<!--              <j-multi-select-tag type="checkbox" v-model="model.isLiquidWashing" dictCode="" placeholder="请选择液洗" />-->
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同要求评审表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reviewCode">
              <a-input v-model="model.reviewCode" disabled placeholder="请输入合同要求评审表"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="订货单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerName">
              <j-dict-select-tag type="list" disabled v-model="model.customerName" dictCode="erp_customer,name,id" placeholder="请选择客户" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="客户编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerCode">
              <j-dict-select-tag type="list" disabled v-model="model.customerCode" dictCode="erp_customer,code,id" placeholder="请选择客户" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单据类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="documentType">
              <j-dict-select-tag type="list" v-model="model.documentType" dictCode="marketing_type" placeholder="请选择单据类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="客户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customer">
              <a-input v-model="model.customer" disabled placeholder="请输入客户类型" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="国家" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="country">
              <a-input v-model="model.country" placeholder="请输入国家"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="包材到位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageInPlace">
              <a-input v-model="model.packageInPlace" placeholder="请输入包材到位"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="交货日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deliveryDate">
              <a-input v-model="model.deliveryDate" placeholder="请输入交货日期"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="修改备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modifyRemarks">
              <a-input v-model="model.modifyRemarks" placeholder="请输入修改备注"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :span="24"  >
          <a-col :span="24" >
            <a-col :span="24">
              产品信息
            </a-col>
            <a-col :span="24">
              <!-- 表格 -->
              <a-table bordered :data-source="model.erpGoodsPackageList"
                       :columns="goodsColumns"
                       :rowKey="record=>record.goodsId"
                       :selected="onSelectChange"
                       :row-selection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
                       :pagination="false">
                <template slot="meUnit" slot-scope="text">
                  <span>{{ unitDictOptions[text] }}</span>
                </template>
                <template slot="auUnit" slot-scope="text">
                  <span>{{ zlunitDictOptions[text] }}</span>
                </template>
              </a-table>
            </a-col>
          </a-col>
          <a-col :span="24"  title="关联包材信息">
            <a-col :span="24">
              关联包材信息
            </a-col>
            <a-table bordered :data-source="model.packagelList"
                     tableLayout='fixed'
                     :columns="packageColumns"
                     :rowKey="record=>record.detailNo"
                     :pagination="false"
                     :scroll="{ x:800,y:500 }"
                     :span="20">
              <template slot="isPattern" slot-scope="text">
                <span>{{ patternDictOptions[text] }}</span>
              </template>
            </a-table>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="包装要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packReq">
              <j-editor v-model="model.packReq" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="质量要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="formulaReq">
              <j-editor v-model="model.formulaReq"   disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="打码要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productionRemark">
              <j-editor v-model="model.productionRemark" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="评审备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reviewRemark">
              <j-editor v-model="model.reviewRemark" />
            </a-form-model-item>
          </a-col>
          <a-col :span="7" >
            <a-form-model-item label="重量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weight">
              <a-input-number v-model="model.weight" disabled placeholder="请输入重量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="7" >
            <a-form-model-item label="重量单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weightUnit">
              <j-dict-select-tag type="list" disabled v-model="model.weightUnit" dictCode="zl_unit" placeholder="请选择重量单位" />
            </a-form-model-item>
          </a-col>
          <a-col :span="7" >
            <a-form-model-item label="柜数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cabinetCount">
              <a-input v-model="model.cabinetCount" disabled placeholder="请输入柜数" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="3" >
<!--            <a-form-model-item label="柜数单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="extra">-->
              <a-input v-model="model.extra" disabled placeholder="请输入柜数单位" ></a-input>
<!--            </a-form-model-item>-->
          </a-col>
          <a-col :span="7" >
            <a-form-model-item label="成交方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="transactionMethod">
              <a-input v-model="model.transactionMethod" disabled placeholder="请输入成交方式" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="7">
            <a-form-model-item label="客户其他费用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="otherExpenses">
              <a-input-number v-model="model.otherExpenses" disabled placeholder="请输入客户其他费用" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="客户订单费用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderFees">
              <a-input-number v-model="model.orderFees" disabled placeholder="请输入客户订单费用" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="货款总值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
              <a-input-number v-model="model.totalAmount" placeholder="请输入货款总值" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="2">
<!--            <a-form-model-item label="币种" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currency">-->
              <j-dict-select-tag type="list" v-model="model.currency" dictCode="currency" placeholder="请选择币种" />
<!--            </a-form-model-item>-->
          </a-col>
        </a-row>
        <a-row >
          <a-col :span="14">
          <a-col :span="24">
            <a-form-model-item label="财务备录" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="financialRemarks">
              <a-textarea v-model="model.financeRemark" placeholder="" :rows="4" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="付款方式"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payMethod">
              <a-input v-model="model.payMethod" placeholder="请输入付款方式" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="天数" label-width='100px'   :labelCol="labelCol" :wrapperCol="wrapperCol" prop="daysArrival">
              <a-input-number v-model="model.daysArrival" placeholder="请输入到货后付全款天数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="发货港" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shipPort">
              <a-input v-model="model.shipPort" placeholder="请输入发货港" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="目的港" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="destPort">
              <a-input v-model="model.destPort" placeholder="请输入目的港" ></a-input>
            </a-form-model-item>
          </a-col>
          </a-col>
          <a-col :span="10">
            <a-tabs v-model="activeKey" @change="handleChangeTabs">
              <a-tab-pane tab="合同评审说明关联文件" :key="refKeys[0]" :forceRender="true">
                <j-vxe-table
                  keep-source
                  :ref="refKeys[0]"
                  :loading="bussContractReviewDesFilesTable.loading"
                  :columns="bussContractReviewDesFilesTable.columns"
                  :dataSource="bussContractReviewDesFilesTable.dataSource"
                  :maxHeight="300"
                  :disabled="formDisabled"
                  :rowNumber="true"
                  :rowSelection="true"
                  :toolbar="false"
                >
                  <template v-slot:action="props">
                    <a @click="handlePreviewFile(props)">预览</a>
                  </template>
                </j-vxe-table>
              </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction,getFileAccessHttpUrl, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { Base64 } from 'js-base64'
  import store from '@/store'
  import {initDictOptions} from '@/components/dict/JDictSelectUtil'
  import estar from '../../../estar/oa/util/estar'

  export default {
    name: 'BussInternationalTradeOrdersForm',
    mixins: [JVxeTableModelMixin],
    components: {
    },
    props: [{
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },"requirement"],
    data () {
      return {
        modalWidth: 1250,
        isChecked: false,
        model:{
          erpGoodsPackageList: [],
          reviewId: '',
          desId: '',
          reviewCode: '',
          customerName: '',
          customerCode: '',
          customer: '',
          formulaReq:'',
          packReq:'',
          productionRemark:'',
          reviewRemark:'',
          cabinetCount:'',
          extra:'',
          transactionMethod:'',
          otherExpenses:'',
          totalAmount:'',
          currency:'',
          financeRemark:'',
          daysArrival:'',
          payMethod:'',
          shipPort:'',
          destPort:'',
          orderFees:'',
          isLiquidWashing: false,
          year: ''
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        refKeys: ['bussContractReviewDesFiles', ],
        tableKeys:['bussContractReviewDesFiles', ],
        activeKey: 'bussContractReviewDesFiles',
        confirmLoading: false,
        validatorRules: {
          documentType: [
            { required: true, message: '请选择单据类型!' }
          ]
        },
        selectedRowKeys: [],
        // 选中行
        selectedRows: [],
        goodsColumns: [
          {
            title: '产品编号',
            dataIndex: 'packageCode',
          },
          {
            title: '产品名称',
            dataIndex: 'packageName',
          },
          {
            title: '规格型号',
            dataIndex: 'noneSpec',
          },
          {
            title: '配方序号',
            dataIndex: 'number',
            width: 150,
          },
          {
            title: '是否生产',
            dataIndex: 'isProduction',
            width: 120,
          },
          {
            title: '主数量',
            dataIndex: 'mainQuantity',
            width: 150,
          },
          {
            title: '主单位',
            dataIndex: 'meUnit',
            scopedSlots: { customRender: 'meUnit' }
          },
          {
            title: '辅数量',
            dataIndex: 'auxiliaryQuantity',
            width: 150,
          },
          {
            title: '辅单位',
            dataIndex: 'auUnit',
            scopedSlots: { customRender: 'auUnit' }
          },
          {
            title: '库存',
            dataIndex: 'stockQuantity',
          },
          {
            title: '配方年',
            dataIndex: 'formulaYear',
          },
          {
            title: '配方编码',
            dataIndex: 'formulaCode',
          },
          {
            title: '配方名称',
            dataIndex: 'formulaName',
          },
        ],
        packageColumns: [
          {
            title: '包材编号',
            dataIndex: 'packageCode',
            width: 120,
          },
          {
            title: '包材名称',
            dataIndex: 'packageName',
            width: 120,
          },
          {
            title: '是否自带',
            dataIndex: 'isBrought',
            width: 120,
          },
          {
            title: '规格型号',
            dataIndex: 'noneSpec',
            width: 120,
          },
          {
            title: '包材类别',
            dataIndex: 'packageType',
            width: 120,
          },
          {
            title: '损耗率(%)',
            dataIndex: 'lossRate',
            width: 120,
          },
          {
            title: '比例数量(外包:内包)',
            dataIndex: 'num',
            width: 120,
          },
          {
            title: '材质',
            dataIndex: 'materialQuality',
            width: 120,
          },
          {
            title: '尺寸',
            dataIndex: 'packSpec',
            width: 120,
          },
          {
            title: '包装要求',
            dataIndex: 'requirements',
            width: 120,
          },
          {
            title: '是否有版样',
            dataIndex: 'isPattern',
            scopedSlots: { customRender: 'isPattern' },
            width: 120,
          },
        ],
        bussContractReviewDesFilesTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '附件',
              key: 'filePath',
              type: JVXETypes.file,
              token:true,
              responseName:"message",
              width:"200px",
              placeholder: '请选择文件',
              defaultValue:'',
            },
            {
              title: '附件说明',
              key: 'fileDesc',
              type: JVXETypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },   {
              title: '操作',
              key: 'action',
              type: JVXETypes.slot,
              fixed: 'right',
              minWidth: '100px',
              align: 'center',
              slotName: 'action',
            }
          ]
        },
        url: {
          add: "/review/bussInternationalTradeOrders/add",
          edit: "/review/bussInternationalTradeOrders/edit",
          queryById: "/review/bussInternationalTradeOrders/queryById",
          bussContractReviewDesFiles: {
            list: '/business/bussContractReviewDes/queryBussContractReviewDesFilesByMainId'
          },
        },
        openDictOptions:{
        },
        unitDictOptions:{},
        zlunitDictOptions:{},
        patternDictOptions:{}
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.initDictConfig();
      let time = estar.toDate(new Date(), "yyyy");
      this.model.year = time;
    },
    methods: {
      onCheckboxChange(e) {
        console.log('Checkbox changed:', e.target.checked);
        // 这里可以执行你的逻辑，比如根据勾选状态进行下一步操作
        this.model.isLiquidWashing = e.target.checked;
      },
      initDictConfig() {
        console.log("--我才是真的方法!--")
        //初始化字典 - 开关
        initDictOptions('yes_no').then((res) => {
          console.log(res);
          if (res.success) {
            console.log(res.result);
            this.openDictOptions = res.result;
          }
        });
        //初始化字典 - 主单位
        initDictOptions('ji_unit').then((res) => {
          var unitDictOptions = this.unitDictOptions
          console.log(res);
          if (res.success) {
            res.result.forEach(function(item,index){
              unitDictOptions[item.value] = item.label;
            })
          }
          this.unitDictOptions = unitDictOptions
        });
        //初始化字典 - 辅单位
        initDictOptions('zl_unit').then((res) => {
          var zlunitDictOptions = this.zlunitDictOptions
          console.log(res);
          if (res.success) {
            res.result.forEach(function(item,index){
              zlunitDictOptions[item.value] = item.label;
            })
          }
          this.zlunitDictOptions = zlunitDictOptions
        });
        //初始化字典 - 是否有版样
        this.patternDictOptions = {
          '1' : '是',
          '0' : '否',
        }
      },
      add () {
        console.log("--------")
        // this.edit(this.modelDefault);
        console.log(this.requirement)
        this.model.reviewId = this.requirement.id;
        this.model.desId = this.requirement.desId;
        this.model.reviewCode = this.requirement.code;
        this.model.productionRemark = this.requirement.productionRemark;
        this.model.reviewRemark = this.requirement.remark;
        this.model.otherExpenses = this.requirement.otherExpenses;
        this.model.totalAmount = this.requirement.totalAmount;
        this.model.currency= this.requirement.currency;
        this.model.financeRemark = this.requirement.financeRemark;
        getAction('/business/bussContractReviewDes/queryById', {id:this.requirement.desId}).then(res => {
          console.log("1111111");
          console.log(res);
          let records = res.result
          if (records != null) {
            this.model.customerName = records.customerId;
            this.model.customerCode = records.customerId;
            this.model.customer = records.customer;
            this.model.formulaReq = records.formulaReq;
            this.model.packReq = records.packReq;
            this.model.weight = records.weight;
            this.model.weightUnit = records.weightUnit;
            this.model.cabinetCount = records.cabinetCount;
            this.model.extra = records.extra;
            this.model.payMethod =  records.payMethod;
            this.model.transactionMethod = records.transactionMethod;
            this.model.daysArrival = records.daysArrival;
            this.model.shipPort = records.shipPort;
            this.model.destPort= records.destPort;
          }
        })
        this.editAfter();
      },
      edit (record) {
        getAction('/review/bussContractRequirementReview/queryById', {id:record.reviewId}).then(rec => {
          let recs = rec.result;
          Vue.set(record, 'desId', recs.desId)
          Vue.set(record, 'reviewCode', recs.code)
          Vue.set(record, 'productionRemark', recs.productionRemark)
          Vue.set(record, 'reviewRemark', recs.remark)
          Vue.set(record, 'otherExpenses', recs.otherExpenses)
          Vue.set(record, 'totalAmount', recs.totalAmount)
          Vue.set(record, 'currency', recs.currency)
          Vue.set(record, 'financeRemark', recs.financeRemark)
          Vue.set(record, 'erpGoodsPackageList', [])
          getAction('/business/bussContractReviewDes/queryById', {id:recs.desId}).then(res => {
            console.log("1111111");
            console.log(res);
            let records = res.result
            if (records != null) {
              Vue.set(record, 'customerName', records.customerId)
              Vue.set(record, 'customerCode', records.customerId)
              Vue.set(record, 'customer', records.customer)
              Vue.set(record, 'formulaReq', records.formulaReq)
              Vue.set(record, 'packReq', records.packReq)
              Vue.set(record, 'cabinetCount', records.cabinetCount)
              Vue.set(record, 'extra', records.extra)
              Vue.set(record, 'weight', records.weight)
              Vue.set(record, 'weightUnit', records.weightUnit)
              Vue.set(record, 'payMethod', records.payMethod)
              Vue.set(record, 'transactionMethod', records.transactionMethod)
              Vue.set(record, 'daysArrival', records.daysArrival)
              Vue.set(record, 'shipPort', records.shipPort)
              Vue.set(record, 'destPort', records.destPort)
            }
            this.model = Object.assign({}, record);
            //此处可调用出口业务报价单edit，传入出口业务报价单model
            this.visible = true;

            this.editAfter()
          })
        })
        this.model = Object.assign({}, record);
        this.visible = true;
        console.log(this.model.isLiquidWashing)
        this.isChecked = this.model.isLiquidWashing === 'true';
      },
      editAfter () {
        let _this = this;
        console.log("11111" + _this.model.erpGoodsPackageList);
        getAction('/base/erpGoods/goodsAndFormula/ByReviewId', {id:this.model.reviewId}).then(res => {
          let erpGoodsList = res.result;
          erpGoodsList.forEach(function(item,index){
            console.log(item,index)
            let detail = {};
            detail.goodsId = item.id;
            detail.packageCode = item.code;
            detail.packageName = item.name;
            detail.noneSpec = item.noneSpec;
            detail.meUnit = item.meUnit;
            detail.auUnit = item.auUnit;
            detail.formulaId = item.formulaId;
            detail.formulaCode = item.formulaCode;
            detail.formulaName = item.formulaName;
            detail.formulaYear = item.formulaYear;
            detail.packageVos = item.packageVos;
            detail.number = item.number;
            detail.mainQuantity = item.mainQuantity;
            detail.auxiliaryQuantity = item.auxiliaryQuantity;
            detail.isProduction = item.isProduction;
            _this.model.erpGoodsPackageList.push(detail);
          })
        })
        // 加载子表数据
        if (this.model.desId) {
          let params = { id: this.model.desId }
          this.requestSubTableData(this.url.bussContractReviewDesFiles.list, params, this.bussContractReviewDesFilesTable)
        }
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        if (this.selectedRows.length > 0 && this.selectedRows[0] != null) {
          const key = 'goodsId'
          this.selectedRowKeys = [selectedRowKeys.filter(item => item !== this.selectedRowKeys[0])[0]]
          this.selectedRows = [selectedRows.filter(item => item[key] !== this.selectedRows[0][key])[0]]
        } else {
          this.selectedRowKeys = [selectedRowKeys[0]]
          this.selectedRows = [selectedRows[0]]
        }
        console.log(this.selectedRows)
        if (this.selectedRows[0] != null) {
          const dataSource = [...this.model.erpGoodsPackageList];
          const target = dataSource.find(item => item.goodsId === this.selectedRows[0].goodsId);
          if (target.packageVos != null && target.packageVos.length >0 ){
            this.model.packagelList = target.packageVos;
          }else {
            this.model.packagelList = [];
          }
        }
      },
      submitForm () {
        const that = this;
        console.log(this.model.isLiquidWashing)
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      handlePreviewFile(row) {
        let filePath=row.row.filePath
        let reviewUrl = this.getImgView(filePath)
        let rowpath = reviewUrl.replace(/\\/g, '/');
        let base = window._CONFIG.onlinePreviewDomainURL + "/onlinePreview?url="
        let codename = Base64.encode(rowpath);
        let url = base + codename + '&watermarkTxt=' + encodeURIComponent(store.getters.userInfo.username)
        window.open(url, '_blank')
      },
      getImgView(text){
        if(text && text.indexOf(",")>0){
          text = text.substring(0,text.indexOf(","))
        }
        return getFileAccessHttpUrl(text)
      },
    }
  }
</script>